{% extends 'base.html' %}
{% block content-wrapper %}
    {% autoescape off %}
    <div class="content-wrapper">
        <div class="row">
            <div class="col-lg-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Bar chart</h4>
                        {{ bar1_html|safe }}
                    </div>
                </div>
            </div>
            <div class="col-lg-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Line chart</h4>
                        {{ line1_html|safe }}
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Line chart</h4>
{#                        <h4 class="card-title">Area chart</h4>#}
                        {{ line2_html|safe }}
                    </div>
                </div>
            </div>
            <div class="col-lg-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Bar chart</h4>
{#                        <h4 class="card-title">Doughnut chart</h4>#}
                        {{ bar2_html|safe }}
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">前二十排行榜</p>
                        <div class="table-responsive">
                            <table id="recent-purchases-listing" class="table">
                                <thead>
                                <tr>
                                    <th>视频标题</th>
                                    <th>BVID</th>
                                    <th>播放数</th>
                                    <th>点赞数</th>
                                    <th>投币数</th>
                                    <th>URL</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for product in all_products_top20 %}
                                	<tr>
                                        <td>{{ product.title }}</td>
                                        <td>{{ product.BVID }}</td>
                                        <td>{{ product.play_cnt_list }}</td>
                                        <td>{{ product.like_cnt_list }}</td>
                                        <td>{{ product.coin_cnt_list }}</td>
                                        <td><a href="{{ product.video_url }}">{{ product.video_url }}</a></td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endautoescape %}
{% endblock %}